import React, { Component, useRef } from 'react'
import { SearchOutlined } from "@ant-design/icons";
import { Form, Input, Space, Button, DatePicker, Tabs } from "antd";
import _ from 'lodash';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import GoBack from '@/components/TheGoBack';
import { getDateTime3 } from '../../../utils/getDate';
import "@/views/commodity/style/style.less";
import { apiGetMemberTripPage } from '@/request/petTaxi';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.createStartTime = getDateTime3(values.time[0])
      values.createEndTime = getDateTime3(values.time[1])
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      time: []
    })
    getValue({})
  }
  return (
    <div
      className="p-search-box"
      style={{ display: "flex", justifyContent: "space-between" }}
    >
      <Form ref={formRef} onFinish={onFinish} layout="inline">
        <Form.Item name="time" label="订单时间">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button htmlType="submit" type="primary">搜索</Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default class History extends Component {
  state = {
    tripStatus: '9',
    tabData: [
      {
        label: '已完成',
        value: '9'
      },
      {
        label: '已取消',
        value: '0'
      },
    ],
    columns9: [
      {
        title: '订单编号',
        dataIndex: 'orderCode',
        key: 'orderCode'
      },
      {
        title: '乘客姓名',
        dataIndex: 'contactName',
        key: 'contactName'
      },
      {
        title: '联系方式',
        dataIndex: 'contactPhone',
        key: 'contactPhone'
      },
      {
        title: '起点',
        dataIndex: 'originAddressDetail',
        key: 'originAddressDetail'
      },
      {
        title: '终点',
        dataIndex: 'destinationAddressDetail',
        key: 'destinationAddressDetail'
      },
      {
        title: '里程',
        dataIndex: 'totalMileage',
        key: 'totalMileage',
        render: (text, record) => {
          return React.$transNum(text, 2, -3) + '公里'
        }
      },
      {
        title: '支付金额',
        dataIndex: 'totalPrice',
        key: 'totalPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      },
      {
        title: '车牌号',
        dataIndex: 'vehicleBrand',
        key: 'vehicleBrand'
      },
      {
        title: '订单时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
    ],
    dataSource9: [],
    pageData9: {
      pageNo: 1,
      pageSize: 10
    },
    total9: 0,
    columns0: [
      {
        title: '订单编号',
        dataIndex: 'orderCode',
        key: 'orderCode'
      },
      {
        title: '乘客姓名',
        dataIndex: 'contactName',
        key: 'contactName'
      },
      {
        title: '联系方式',
        dataIndex: 'contactPhone',
        key: 'contactPhone'
      },
      {
        title: '起点',
        dataIndex: 'originAddressDetail',
        key: 'originAddressDetail'
      },
      {
        title: '终点',
        dataIndex: 'destinationAddressDetail',
        key: 'destinationAddressDetail'
      },
      {
        title: '里程',
        dataIndex: 'totalMileage',
        key: 'totalMileage',
        render: (text, record) => {
          return React.$transNum(text, 2, -3) + '公里'
        }
      },
      {
        title: '退款金额',
        dataIndex: 'returnTotalPrice',
        key: 'returnTotalPrice',
        render: (text, render) => {
          return <React.$Price price={text} />
        }
      },
      {
        title: '扣款金额',
        dataIndex: 'defaultValue',
        key: 'defaultValue',
        render: (text, render) => {
          return <React.$Price price={text} />
        }
      },
      {
        title: '车牌号',
        dataIndex: 'vehicleBrand',
        key: 'vehicleBrand'
      },
      {
        title: '订单时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
    ],
    dataSource0: [],
    pageData0: {
      pageNo: 1,
      pageSize: 10
    },
    total0: 0,
    loading: false,
    searchValue: {}
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    const { tripStatus, searchValue } = this.state
    const { id } = this.props.match.params
    let res = await apiGetMemberTripPage({ ...this.state[`pageData${tripStatus}`], ...searchValue, tripStatus, storeChauffeurId: id })
    if (res.data && res.code === 0) {
      this.setState({
        [`dataSource${tripStatus}`]: res.data,
        [`pageData${tripStatus}`]: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        [`total${tripStatus}`]: res.totalCount
      })
    }
    this.setState({ loading: false })
  }
  pageChange = (pageNo, pageSize, index) => {
    this.setState({
      [`pageData${index}`]: {
        pageNo,
        pageSize,
      },
    }, () => this.getData());
  };
  setTripStatus = key => {
    this.setState({
      tripStatus: key
    }, () => this.getData())
  }
  getValue = value => {
    this.setState({
      searchValue: value,
      [`pageData${this.state.tripStatus}`]: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }
  render() {
    const { tabData, loading } = this.state
    const operations = {
      right: <SearchHeader getValue={this.getValue} />
    };
    console.log(this.state.dataSource9);
    return (
      <div className='p-layout-box'>
        <GoBack history={this.props.history} title="历史行程" />
        <Tabs
          onChange={(value) => this.setTripStatus(value)}
          tabBarExtraContent={operations}
        >
          {tabData.map((v, i) => {
            return (
              <TabPane tab={v.label} key={v.value}>
                <div className="p-layout-content-pagination">
                  <TheTable
                    scroll={{ x: "max-content" }}
                    columns={this.state[`columns${v.value}`]}
                    dataSource={this.state[`dataSource${v.value}`]}
                    loading={loading}
                  />
                  <ThePagination
                    pageNo={this.state[`pageData${v.value}`].pageNo}
                    pageSize={this.state[`pageData${v.value}`].pageSize}
                    total={this.state[`total${v.value}`]}
                    pageChange={(pageNo, pageSize) =>
                      this.pageChange(pageNo, pageSize, v.value)
                    }
                  />
                </div>
              </TabPane>
            );
          })}
        </Tabs>
      </div>
    )
  }
}
